<template>
    <div class="goodsDetail-container">
        <!-- //商品详情轮播图 -->
        <div class="card">
            <van-swipe class="my-swipe" :autoplay="8000" indicator-color="white">
                <van-swipe-item v-for="item in lunbo " :key="item.lunbo">
                    <img :src="item.src" alt="">
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 介绍和价格 -->
        <div class="card">
            <div class="price">
                <span class="sell_price">&yen;{{ goodsInfo.sell_price }}</span>
                <span class="market_price">&yen;{{ goodsInfo.market_price }}</span>
            </div>
            <div class="title van-multi-ellipsis--l2">
                {{ goodsInfo.title }}
            </div>
        </div>
        <div class="card">
            <van-divider content-position="left">介绍</van-divider>
            <div class="content" v-html="goodsInfo.content">

            </div>
        </div>
        <!-- 底部栏加入购物车和立即购买 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" color="#ee0a24" @click="callPhone" />
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" @click="addCar" />
            <van-goods-action-button color="#7232dd" type="danger" text="立即购买" @click="buy" />
        </van-goods-action>
        <!-- 商品sku -->
        <van-sku v-model="showSku" :show-add-cart-btn="isShowAddCartBtn" :sku="sku" :goods="goods"
            :goods-id="goodsInfo.id" :hide-stock="sku.hide_stock" :reset-stepper-on-hide="true" @add-cart="addCart"
            @buy-clicked="buyClicked">
            <template #sku-messages>
                <div class="card">
                    <van-divider>介绍</van-divider>
                    <div>商品货号：{{ goodsInfo.goods_no }}</div>
                    <div>库存：{{ goodsInfo.stock_quantity }}件</div>
                    <div>上架时间：{{ goodsInfo.add_time | dateFormat('YYYY-MM-DD') }}</div>
                    {{ goodsInfo.sell_price }}
                </div>
            </template>
        </van-sku>
    </div>
</template>

<script>
//商品详情轮播图接口
import { fetchGoodsImage } from '../api/goodslist.js'
//商品详情基本信息接口
import { fetchGoodsInfo } from '../api/goodslist.js'
export default {
    data() {
        return {
            //每个商品的id
            id: this.$route.params.id,
            lunbo: [],
            goodsInfo: {},
            showSku: false,
            isShowAddCartBtn: true,
            sku: {
                tree: [],
                price: "879.00", // 默认价格（单位元）
                stock_num: 18, // 商品总库存
                hide_stock: false, // 是否隐藏剩余库存
            },
            goods: {
                picture: ""
            }
        }
    },
    created() {
        this._fetchGoodsImage()
        this._fetchGoodsInfo()
    },
    methods: {
        callPhone() {
            this.$dialog.confirm({
                title: '拨打电话',
                message: '确认要拨打电话吗?',
            })
                .then(() => {
                    window.location.href = "tel://" + 14725883217
                })
                .catch(() => {
                    // on cancel
                });
        },
        //商品详情轮播图
        async _fetchGoodsImage() {
            let data = await fetchGoodsImage(this.id)
            this.lunbo = data.message
            // console.log(this.lunbo);
            //给sku缩略图赋值
            this.goods.picture = this.lunbo[0].src
        },
        //商品详情基本信息
        async _fetchGoodsInfo() {
            let data = await fetchGoodsInfo(this.id)
            this.goodsInfo = data.message
            //sku赋值
            // console.log(this.goodsInfo);
            this.sku.price = this.goodsInfo.sell_price //价格
            this.sku.stock_num = this.goodsInfo.stock_quantity //库存
        },
        //加入购物车
        addCar() {
            this.showSku = true
            this.isShowAddCartBtn = true
        },
        //立即购买
        buy() {
            this.showSku = true
            this.isShowAddCartBtn = false
        },
        //加入购物车 停留在当前的页面
        addCart(skuData) {
            // console.log(skuData);
            //将商品添加到购物车
            //构造购物车商品数据结构
            let { goodsId, selectedNum } = skuData
            let item = {
                id: goodsId,
                number: selectedNum,
                price: this.goodsInfo.sell_price,
                selected: true,
            }
            //提交一个mutation
            this.$store.commit('addGoodsToCar',item)
            //继续停留在当前页面
            this.showSku = false
            this.$dialog.alert({
                message:'购物车加入成功'
            })
            console.log(item);
        },
        //立即购买 跳转到购物车页面
        buyClicked() { }
    }
}

</script>

<style lang="scss" scoped>
.goodsDetail-container {
    padding: 5px;
    height: 100vh;
    background-color: rgb(234, 233, 233);

    .card {
        border-radius: 5px;
        margin-bottom: 10px;
        background-color: #fff;
        padding: 10px;

        .my-swipe {
            .van-swipe-item {
                height: 240px;
                text-align: center;

                img {
                    widows: 200px;
                    height: 240px;
                }
            }
        }

        .price {
            display: flex;
            align-items: center;

            .sell_price {
                color: red;
                font-size: 20px;
                margin-right: 10px;
            }

            .market_price {
                text-align: center;
                color: rgb(187, 184, 181);
                text-decoration: line-through;
            }
        }

        .title {
            // margin-top: 15px;
            color: rgb(53, 53, 53);
        }

        .content {
            ::v-deep table {
                width: 100%;
                height: 100%;
            }

            ::v-deep img {
                width: 100%;
                height: 100%;
            }
        }
    }
}
</style>